<script lang="ts" setup>
import { computed, inject } from 'vue';

import { AuthPageLayout } from '@vben/layouts';
import { preferences } from '@vben/preferences';

import logoImage from '#/images/logo.png';
import { $t } from '#/locales';

const appName = computed(() => preferences.app.name);
const logo = computed(() => logoImage);
const copyright = inject('copyright');
</script>

<template>
  <div class="aniBg flex min-h-full flex-1 select-none overflow-x-hidden">
    <AuthPageLayout
      :app-name="appName"
      :logo="logo"
      :copyright="copyright"
      :page-description="$t('authentication.pageDesc')"
      :page-title="$t('authentication.pageTitle')"
    >
      <!-- 自定义工具栏 -->
      <!-- <template #toolbar></template> -->
    </AuthPageLayout>
  </div>
</template>
<style scoped>
.aniBg {
  animation: bgs 15s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bgs {
  0%,
  100% {
    background-image: url('../images/login/loginbg.png');
  }

  33% {
    background-image: url('../images/login/login-bg-blue.png');
  }

  66% {
    background-image: url('../images/login/login-bg-orange.png');
  }
}
</style>
